<template>
	<view class="profile-card" @click="handleClick">
		<!-- 左侧头像 -->
		<view class="avatar-wrapper">
			<image class="avatar" :src="this.url" alt="User Avatar"/>
		</view>

		<!-- 右侧信息 -->
		<view class="info-wrapper">
			<text class="username">{{ username || '未登录'}}</text>
			<view class="info-item">
				<text class="label">手机号：</text>
				<text class="value">{{ phone || '未登录' }}</text>
			</view>
			<view class="info-item">
				<text class="label">邮　箱：</text>
				<text class="value">{{ email || '未登录' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import base from "/axios/base.js";
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	export default {
	  props: {
	    avatarUrl: {
	      type: String,
	      default: '/files/IMG_9330.JPG'
	    },
	    username: String,
	    phone: String,
	    email: String
	  },
	  name: 'myInfo',
	  setup(props) {
	    const User = ref({});
	    const url = ref('');
	
	    // 加载数据的函数
	    const loadData = () => {
	      // 获取 Cookie
	      const cookieValue = uni.getStorageSync('LoginUser');
	      url.value = base.url + props.avatarUrl;
	      
	      if (!cookieValue) {
	        console.log("未登录！");
	        url.value = '';
	        User.value = {};
	        return;
	      }
	      
	      // console.log("cookieValue", cookieValue);
	      User.value = cookieValue;
	    };
	
	    // 组件创建时加载数据
	    loadData();
	
	    // 监听props变化
	    watch(
	      () => [props.avatarUrl, props.username, props.phone, props.email],
	      () => {
	        console.log("props发生变化，重新加载数据");
	        loadData();
	      },
	      { deep: true }
	    );
	
	    // 点击事件处理
	    const handleClick = () => {
	      // console.log("跳转用户详情页");
		  if(uni.getStorageSync('LoginUser')){
			  uni.navigateTo({
			    url: '/pages/userDetails/userDetails'
			  });
		  }else{
			  // console.log("请先登录");
			  uni.showToast({
			  	title: '请先登录',
			  	icon: 'none'
			  });
		  }
	      
	    };
	
	    return {
	      User,
	      url,
	      handleClick
	    };
	  }
	};
</script>

<style>
	.profile-card {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

		.avatar-wrapper {
			margin-right: 32rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #f0f0f0;
			}
		}

		.info-wrapper {
			flex: 1;

			.username {
				display: block;
				font-size: 34rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 16rpx;
			}

			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;

				.label {
					width: 120rpx;
					font-size: 28rpx;
					color: #999;
				}

				.value {
					flex: 1;
					font-size: 28rpx;
					color: #666;
					word-break: break-all;
				}
			}
		}
	}
</style>